<template>
  <article data-wow-duration="2s" class="post-item fadeInDown">
    <div class="post-item-cover">
      <router-link :to="'/article/' + item.id">
        <q-img
          class="image-wrapper"
          :src="
            !item.coverImg
              ? `https://api.ixiaowai.cn/gqapi/gqapi.php?t=${Math.random()}`
              : item.coverImg
          "
          style="height:100%"
        >
          <template v-slot:loading>
            <q-spinner-gears color="white" />
          </template>
        </q-img>
        <div class="post-label left" v-if="navType == 'prev'">
          <q-icon name="mdi-chevron-left" />上一篇
        </div>

        <div class="post-label right" v-if="navType == 'next'">
          <q-icon name="mdi-chevron-right" />下一篇
        </div>
        <div class="card-title">{{ item.title }}</div>
      </router-link>
    </div>
  </article>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Article } from 'src/models/article';

@Component({})
export default class NavItem extends Vue {
  @Prop({ type: Object, required: true }) readonly item!: Article;
  ///上一页 下一页

  @Prop({ type: String, required: false, default: '' })
  readonly navType!: string;
}
</script>

<style lang="scss" scoped>
.post-item {
  display: flex;
  height: 120px;
  flex-wrap: wrap;
  margin: 10px;
  border-radius: 13px;
  box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
  position: relative;
  overflow: hidden;

  .post-item-cover {
    display: block;
    width: 100%;
    .image-wrapper {
      filter: brightness(0.6);
    }
    img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      transition: $transition-time-slow;
      object-fit: cover;
      opacity: 0.7;
    }
    .post-label {
      position: absolute;
      top: 0;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 8px;

      color: $module-bg;

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }
    }
    .card-title {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 35%;
      left: 0;
      text-align: center;
      color: var(--text-white);
      font-size: 18px;
      font-weight: 400;
    }
  }
}
</style>
